<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是一个聊天室</title>
</head>
<body>


<div>
    <div id="roombox"></div>
</div>
<div>
    <input type="text" id="roomid" value="1">
    <input type="text" id="username" value="yykk">
    <input type="text" id="content" value="11111">
    <button id="sendmsg">发送消息</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        $("#sendmsg").on("click", function () {
            var roomid = $("#roomid").val();
            var username = $("#username").val();
            var content = $("#content").val();
            $.get("addmsg", {roomid: roomid, content: content, username: username}, function (res) {
                $("#messagebox").val(res);
                loadMessage();
            })
        })


        function loadMessage() {
            var roomid = $("#roomid").val();
            $.get("readmsg?roomid=" + roomid, function (res) {
                var html = "";
                for (var i = 0; i < res.length; i++) {
                    var obj = res[i].value;
                    for (var key in obj) {
                        html += "<p>用户：" + key + ":" + obj[key] + "，时间是：" + res[i].id.timestamp + "</p>"
                    }
                }
                $("#roombox").append(html);
            })
        };

        loadMessage();
    })
</script>


</body>
</html>